<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>上传打印</title>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="assets/Less/cloud_printer.css">
    <link rel="stylesheet" href="assets/Less/upload.css">
    <link type="image/x-icon" rel="shortcut icon" href="assets/images/favicon.ico">


    <style>
        * {
            box-sizing: unset;
        }
        .c_navbar {
            /* background-color: #f8f8f8; */
            background-color: #464646;
            border-color: #e7e7e700;
        }
        .c_navbar .c_cot {
            width: 90%;
        }
        .c_navbar .c_cot .c_header {
            display: inline-block;
            width: 16%;
            height: 75px;
        }
        .c_navbar .c_cot .nav_menu_li {
            margin-right: 1vh;
        }
        .c_navbar .c_cot .nav_menu_li .nav_menu_font {
            line-height: 44px;
            font-size: 21px;
            color: #fff;
            margin-right: 14px;
        }
        .c_navbar .c_cot .btn_login {
            border: 3px solid #fff;
            border-radius: 18px;
            height: 40px;
            /* line-height: 75px; */
            margin-top: 21px;
            width: 74px;
            height: 36px;
        }
        .c_navbar .c_cot .btn_login a {
            color: #fff;
            line-height: 0px;
            font-size: 1.3em;
        }

        .footer {
            background: #808080a1;
        }
        .footer div {
            margin-bottom: 10px;
        }
        .footer div div .f_img {
            width: 8%;
            display: inline-block;
            margin-left: 13.6%;
        }
        .footer div div h3 {
            font-size: 24px;
            color: white;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 10px;
        }
    </style>


</head>
<body style="overflow: hidden;">


<nav class="navbar navbar-default c_navbar navbar-static-top" role="navigation">
    <div class="container c_cot">
        <div class="navbar-header c_header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- <a href="#" class="navbar-brand nav-title">3dPrinter</a> -->
            <a class="navbar-brand" href="#">
                <img src="images/brand.png" alt="" class="img-responsive center-block brand_img">
            </a>
            <!-- <div class="navbar-brand nav-title c_brand">
                <img src="../assets/image/3dprinter/brand.png" alt="" class="img-responsive center-block brand_img">
            </div> -->
        </div>
        <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="nav navbar-nav navbar-right">
                <li class="cative nav_menu_li"><a href="index.html" class="nav_menu_font">首页</a></li>
                <li class="cative nav_menu_li"><a href="modelbase.html" class="nav_menu_font">模型库</a></li>
                <li class="cative nav_menu_li"><a href="#" class="nav_menu_font">在线建模</a></li>
                <li class="cative nav_menu_li"><a href="#" class="nav_menu_font">在线打印</a></li>
                <li class="cative nav_menu_li"><a href="dist_shequ/index.html" class="nav_menu_font">社区</a></li>
                <li class="cative nav_menu_li"><a href="dist_about/dist_about/index.html" class="nav_menu_font">关于</a></li>
                <li class="cative nav_menu_li btn_login" style="text-align: center;height: 30px">
                    <!-- <a href=""></a> -->
                    <a href="http://120.79.148.35:3010/#/login">登录</a>
                    <!-- <a href=""></a> -->
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="image">
    <img src="images/ines-alvarez-fdez-489172-unsplash.jpg" alt=""  class="img-responsive">
    <div class="file">
        <form>
            <input type="file" class="upInput" >
        </form>
        <a class="up">上传文件</a>
        <p>*支持stl、obj文件*</p>
    </div>
</div>


<script src="assets/Jquery/jquery-1.12.4.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script>

    //读取文件信息的函数
    var data;
    var fileName;

    function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {

               // 得到文件名(base64编码)
                data=e.target.result;


                sessionStorage.setItem("data",data);


                var file=sessionStorage.getItem("data");

                if(isNaN(file)){
                    location.href="printing.html";
                }

            };

            reader.readAsDataURL(input.files[0]);
        }
    }



    var $upInput=$(".upInput");
    var $up=$(".up");
    $up.click(function () {
        $upInput.click();
    });

    $upInput.change(function () {

        //获取文件路径
        var path=$upInput.val();

        // 截取文件名后缀
        var file=path.substr(path.lastIndexOf("."));
        fileName=this.files[0].name;

        sessionStorage.setItem("fileName",fileName);


        if (file!==".stl"){
            INPUT.value="";
            return;
        }else if(file==".stl"){
            readURL($upInput[0]);
        }else {
            return;
        }


    });
</script>
</body>
</html>